<template>
  <div>
    <el-countdown v-show="false" :value="timestamp" :formatter="formatter" />
    <div v-html="formattedTime"></div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  timestamp: {
    type: Number,
    default: null
  }
});
const formattedTime = ref("");
const formatter = time => {
  const days = Math.floor(time / 1000 / 60 / 60 / 24); // 计算天数
  const hours = Math.floor((time / 1000 / 60 / 60) % 24); // 计算小时
  const minutes = Math.floor((time / 1000 / 60) % 60); // 计算分钟
  const seconds = Math.floor((time / 1000) % 60); // 计算秒

  // 更新 formattedTime 以便在 v-html 中使用
  formattedTime.value = `
        <span class="countdown-item days">${days}天</span>
        <span class="countdown-item hours">${String(hours).padStart(2, "0")}</span> :
        <span class="countdown-item minutes">${String(minutes).padStart(2, "0")}</span> :
        <span class="countdown-item seconds">${String(seconds).padStart(2, "0")}</span>
      `;

  return `${days}天 ${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`; // 返回字符串以满足 formatter 的要求
};
</script>

<style lang="scss" scoped>
:deep(.countdown-item) {
  &.days,
  &.hours,
  &.minutes,
  &.seconds {
    display: inline-block;
    background-color: white;
    padding: 0 5px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #e1e6ed;
    color: #3d3d3d;
  }
  &.days {
    color: #ff3333;
  }
  &.hours {
  }
  &.minutes {
  }
  &.seconds {
  }
}
</style>
